<template>
	<div class="layout-padding-auto ">
		<el-form :model="state.queryForm" ref="queryRef" :inline="true">
			<el-form-item :label="$t('left.leftTime')" prop="leftDate">
				<div class="block">
					<el-date-picker v-model="leftTime" clearable type="daterange" unlink-panels range-separator="To"
						start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" />
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="search"  @click="query">{{ $t('so.query') }}</el-button>
			</el-form-item>
			<el-form-item>
					<el-button  icon="refresh"  @click="resetQuery">{{ $t('so.reset')
								}}</el-button>
					<el-button type="primary" icon="plus"  @click="addDialogRef.openDialog()">{{ $t('left.add')
					}}</el-button>
			</el-form-item>

		</el-form>
		<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
			style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
			:header-cell-style="tableStyle.headerCellStyle" ref="tableRef">
			<el-table-column type="selection" width="40" align="center" />
			<el-table-column type="index" label="#" width="80" />
			<el-table-column prop="processCode" :label="$t('left.processCode')" show-overflow-tooltip />
			<el-table-column prop="productionLineCode" :label="$t('left.productionLineCode')" show-overflow-tooltip />
			<el-table-column prop="leftTime" :label="$t('left.leftTime')" show-overflow-tooltip />
			<el-table-column prop="leftQty" :label="$t('left.leftQty')" show-overflow-tooltip />
			<el-table-column prop="materialCode" :label="$t('left.materialCode')" show-overflow-tooltip />
			<el-table-column :label="$t('common.action')" align="center" width="200" fixed="right">
				<template #default="scope">
					<div style="text-align: center">
						<!-- 修改信息 -->
						<el-button type="primary" icon="edit" @click="addDialogRef.openDialog(scope.row.id)">
						</el-button>
						<!-- 删除 -->
							<el-button class="ml-0.5" type="danger" icon="delete" @click="handleDelete(scope.row.id)">
							</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>

		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>
	<addDialog @refresh="getDataList" ref="addDialogRef" />
</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { ref, reactive } from 'vue';
import { TabsPaneContext, ElMessage } from 'element-plus';
import { getLeftmaterials, DeleteLeftMaterial } from '/@/api/platform/report/leftmaterial';
import { useI18n } from 'vue-i18n';
import { useMessage, useMessageBox } from '/@/hooks/message';
const { t } = useI18n();
// 引入组件
const addDialog = defineAsyncComponent(() => import('./add.vue'));

const getYMD = (date: any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const leftTime = ref([endDate, today]);
// 搜索变量
const queryRef = ref();
const tableRef = ref();
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
}


//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		StartDate: leftTime.value ? getYMD(leftTime.value[0]) : '',
		EndDate: leftTime.value ? getYMD(leftTime.value[1]) : '',
	},
	pageList: getLeftmaterials,
});
//搜索
const query = () => {
	state.queryForm.StartDate = leftTime.value ? getYMD(leftTime.value[0]) : '';
	state.queryForm.EndDate = leftTime.value ? getYMD(leftTime.value[1]) : '';
	getDataList();
};
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);
const addDialogRef = ref();

// 清空搜索条件
const resetQuery = () => {
	leftTime.value = '';
	state.queryForm.StartDate = '';
	state.queryForm.EndDate = '';
	getDataList(false);
};

// 删除操作
const handleDelete = async (id: string) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await DeleteLeftMaterial({ "id": id });
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>